/**
*@author       wuwg
*@createTime   2018/07/20
*@updateTime   2018/07/20
*@description
*@rule
 */
@import '../../../config/config.less';

@css-prefix-mend-photo: ~"@{css-prefix}mend-photo-component";
.@{css-prefix-mend-photo}{
    width:320px;
    border: 1px solid #ddd;
    /**禁止选中内容**/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .@{css-prefix}photo-title  {
        height:40px;
        color: #666;
        text-align: center;
        font:14px/40px "Microsoft YaHei";
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    .@{css-prefix}mend-photo-content {
        position: relative;
        padding-bottom:50px;
        width:320px;
    }


    .@{css-prefix}mend-photo-cm {
        padding:20px;
    }
    /**主体内容区域**/
    .@{css-prefix}mend-photo-cm-in {
        position: relative;
        z-index:2;
    }
    /**照片区域**/
    .@{css-prefix}photo-img-stage {
        position: relative;
        z-index: 1;
        width:226px;
        height: 226px;
        overflow: hidden;
        /* background-color: #3d3b3b;*/
    }

    /**照片操作区域**/
    .@{css-prefix}photo-operate {
        position: absolute;
        right: 0;
        top:0;
        z-index: 2;
        padding:23px 8px;
        height:100%;
        width:21px;
    }
    .@{css-prefix}photo-btn-reduce ,
    .@{css-prefix}photo-btn-add {
        position: absolute;
        left:0;
        z-index: 2;
        width:21px;
        height:21px;
        font:0/0 SimSun;
        cursor: pointer;
        background-color: #a8b1b6;
        border-radius: 3px;
        text-align: center;
    }
    .@{css-prefix}photo-btn-reduce:hover ,
    .@{css-prefix}photo-btn-add:hover {
        background-color: #bebebe;
    }

    /**减号按钮**/
    .@{css-prefix}photo-btn-reduce {
        top:0;
    }
    .@{css-prefix}photo-btn-reduce:after,
    .@{css-prefix}photo-btn-add:after{
        content:"";
        position: absolute;
        top:10px;
        left:10px;
        margin-left:-5px;
        width:11px;
        height: 1px;
        background-color: #fff;
    }
    /**加号按钮**/
    .@{css-prefix}photo-btn-add {
        bottom:0;
    }
    .@{css-prefix}photo-btn-add:before{
        content:"";
        position: absolute;
        top:10px;
        left:10px;
        margin-top:-5px;
        width:1px;
        height: 11px;
        background-color: #fff;
    }

    /**进度条**/
    .@{css-prefix}photo-progress {
        position: relative;
        width:100%;
        height:100%;
        background-color: #eeeff0;
    }

    /**进度条**/
    .@{css-prefix}photo-progress-drag {
        position: absolute;
        top: 50%;
        left:50%;
        z-index:2;
        margin-left:-6px;
        margin-top:-6px;
        width:12px;
        height:12px;
        cursor: move;
        border-radius: 6px;
        background-color: #0aabff;
    }


    /**页面下方操作**/
    .@{css-prefix}photo-footer {
        position: absolute;
        bottom: 0;
        left:0;
        z-index: 1;
        padding:0 20px;
        width:100%;
        height: 50px;
        padding-top:10px;
        border-top: 1px solid #f2f2f2;
        text-align: right;
    }

    .@{css-prefix}photo-footer-btn-upload ,
    .@{css-prefix}photo-footer-btn-confirm ,
    .@{css-prefix}photo-footer-btn-cancel {
        position: relative;
        display: inline-block;
        margin:0 5px;
        padding: 0 12px;
        float: right;
        min-width:76px;
        font-weight: normal;
        color: #fff;
        font: 14px/28px  "Microsoft Yahei";
        cursor: pointer;
        white-space: nowrap;
        border-radius: 3px;
        text-align: center;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        border: 1px solid #00a4fa;
        background-color: #00a4fa;
        background-image: none;
        overflow: hidden;
        outline: none;
        transition: background 0.3s 0s  linear,border-color 0.3s 0s  linear,color 0.3s 0s  linear;
    }
    .@{css-prefix}photo-footer-btn-upload:hover,
    .@{css-prefix}photo-footer-btn-confirm:hover{
        color: #fff;
        background-color: #35b8fc;
    }
    /*取消按钮*/
    .@{css-prefix}photo-footer-btn-cancel{
        color: #333;
        border-color: #ebebeb;
        background-color: #ebebeb;
    }
    .@{css-prefix}photo-footer-btn-cancel:hover{
        color: #333;
        background-color: transparent;
    }
    /**上传按钮*/
    .@{css-prefix}photo-footer-btn-upload {
        float: left;
        margin:0;
        color: #00a4fa;
        background-color: transparent;
    }

    .@{css-prefix}photo-footer-btn-upload input[type="file"]{
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        /*font-size: 0;   line-height: 0;  这两句话非常重要*/
        font-size: 0;
        line-height: 0;
        z-index: 9;
        width: 100%;
        height: 100%;
        opacity: 0;
        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    }


    /**照片**/
    .@{css-prefix}photo-img {
        position: absolute;
        top: 0;
        left:0;
        z-index:1;
    }
    .@{css-prefix}photo-img-stage canvas {
        position: absolute;
        top:0;
        left: 0;
        z-index: 2;
    }
    .@{css-prefix}photo-img-mask {
        opacity: 0.3;
    }
    .@{css-prefix}photo-img-make {
        z-index:5;
        visibility: hidden;
    }
    .@{css-prefix}hide {
        display: none;
    }
}
